<template>
  <div class="box">
    <div class="head">
      <van-icon class="arrow-left" name="arrow-left" @click="goBack" /> 设置
    </div>
    <div class="content">
      <van-cell title="绑定用户名" is-link @click="goShow1" />
      <van-cell title="修改密码" is-link @click="goShow2" />
      <van-button
        class="btn"
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        @click="cleanToken"
      >
        退出登录
      </van-button>
    </div>

    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <h2>设置用户名</h2>
          <van-field
            v-model="username"
            type="text"
            placeholder="请输入用户名"
            class="username"
          />
          <van-button
            class="btn1"
            color="linear-gradient(to right, #ff6034, #ee0a24)"
            @click="bindUserName"
          >
            更新
          </van-button>
        </div>
      </div>
    </van-overlay>
    <van-overlay :show="show2" @click="this.show2 = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <h2>更新密码</h2>
          <van-field
            v-model="oldpassword"
            type="password"
            placeholder="请输入旧密码"
            class="username"
          />
          <van-field
            v-model="newpassword"
            type="password"
            placeholder="请输入新密码"
            class="username"
          />
          <van-button
            v-model="updatePassword"
            class="btn2"
            color="linear-gradient(to right, #ff6034, #ee0a24)"
            @click="updatePassword()"
          >
            更新
          </van-button>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  created() {
    this.token = sessionStorage.getItem("token");
    this.userid = sessionStorage.getItem("userid");
    // console.log('this.userid',this.userid);
    
    
  },
  data() {
    return {
      show: false,
      show2: false,
      username: "",
      newpassword: "",
      oldpassword: "",
    };
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    bindUserName() {
      this.$service({
        method: "get",
        url: "api/user/bindusername",
        params: {
          userid: this.userid,
          username:this.username
        } 
      }).then((res) => {
        console.log(res.data)
        if (res.data.code == 200) {
          Toast("修改成功");
          sessionStorage.setItem("usernames", this.username);
          this.$router.back();
        } else {
          Toast("修改失败");
        }
      });
    },
    updatePassword() {
      this.$service({
        method: "get",
        url: "api/user/updatePassword",
        params: {
          userid: this.userid,
          newpassword:this.newpassword,
          oldpassword:this.oldpassword,
        }
      }).then((res) => {
        console.log(res.data)
        if (res.data.code == 200) {
          Toast("修改成功");
          this.$router.push("/login");
        } else {
          Toast("原始密码错误");
        }
      });
    },
    cleanToken() {
      sessionStorage.clear();
      this.$router.push("/login");
    },
    goShow1() {
      this.show = true;
    },
    goShow2() {
      this.show2 = true;
    },
  },
};
</script>
<style scoped>
.head {
  position: relative;
  height: 3rem;
  background-color: antiquewhite;
  text-align: center;
  line-height: 3rem;
}
.arrow-left {
  position: absolute;
  top: 1rem;
  left: 1rem;
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #efefef;
}
.content {
  flex: 1;
  overflow: auto;
}
.btn {
  margin: 3rem auto;
  width: 99%;
  display: block;
  border-radius: 5rem;
}
.btn1 {
  margin: 1.5rem auto;
  width: 99%;
  display: block;
  border-radius: 5rem;
}
.btn2 {
  margin: 0 auto;
  width: 99%;
  display: block;
  border-radius: 5rem;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80%;
}

.block {
  width: 18rem;
  height: 12rem;
  background-color: #fff;
  border-radius: 3rem;
  box-sizing: border-box;
  padding: 1rem;
  text-align: center;
}
</style>